<script setup>
import { ref } from 'vue'
import {
  searchSceneryService,
  searchHotelService,
  searchRestaurantService
} from '@/apis/travel'

import { searchPostService } from '@/apis/post'
import { searchUserService } from '@/apis/user'
import { searchOrderService } from '@/apis/order'
import { searchEvaluateService } from '@/apis/evaluate'
// 存储搜索到的数据
const data = ref(null)

const props = defineProps({
  type_key: {
    type: String,
    default: ''
  },
  template_key: {
    type: String,
    required: true
  }
})

// 搜索框内输入的内容
const SearchInput = ref(null)

const emit = defineEmits(['search', 'reset', 'showDrawer'])

// 搜索功能
const handleSearch = async () => {
  switch (props.template_key) {
    case 'travel':
      switch (props.type_key) {
        case '景点':
          data.value = await searchSceneryService(SearchInput.value)
          break
        case '酒店':
          data.value = await searchHotelService(SearchInput.value)
          break
        case '餐厅':
          data.value = await searchRestaurantService(SearchInput.value)
          break
      }
      break
    case 'post':
      data.value = await searchPostService(SearchInput.value)
      break
    case 'user':
      data.value = await searchUserService(SearchInput.value)
      break
    case 'order':
      data.value = await searchOrderService(SearchInput.value)
      break
    case 'evaluate':
      data.value = await searchEvaluateService(SearchInput.value)
      break
  }
  emit('search', data.value.data)
}

// 重置功能
const handleReset = () => {
  SearchInput.value = null
  emit('reset')
}
</script>

<template>
  <div class="extra">
    <div class="search">
      <el-input
        v-model="SearchInput"
        style="width: 240px"
        placeholder="请输入搜索内容"
        @keyup.enter="handleSearch"
        clearable
      />
      <el-button type="primary" @click="handleSearch">
        <template #default>搜索</template>
        <template #icon>
          <el-icon><i-ep-Search></i-ep-Search></el-icon>
        </template>
      </el-button>
      <el-button type="info" @click="handleReset">
        <template #default>重置</template>
        <template #icon>
          <el-icon><i-ep-Refresh></i-ep-Refresh></el-icon>
        </template>
      </el-button>
    </div>
    <el-button
      type="primary"
      size="large"
      @click="emit('showDrawer')"
      v-if="template_key === 'travel'"
    >
      <template #default>{{ '添加' + type_key }}</template>
      <template #icon>
        <el-icon><i-ep-Plus></i-ep-Plus></el-icon>
      </template>
    </el-button>
  </div>
</template>

<style lang="scss" scoped>
.extra {
  width: 1250px;
  display: flex;
  justify-content: space-between;

  .search {
    button {
      margin: 0 10px;
    }
  }
}
</style>
